<style>
.hide{
	display:none;
}
</style>
<?php  
$form = array("id"=>'frm-xin');
echo form_open('emp_off/xinnghi_ajax',$form);//employee/ajax/?>
    <div id="cap" class="ve-som"></div>
    <div id="options">
    	<input type="text" name="title" class="k-input" placeholder="{{helper:lang line='emp_off:title'}}" id="title" maxlength="200" />
        <h3>{{helper:lang line='emp_off:status'}}</h3>
			<input id="type_off" value="1" name="type_off" />
			<input id="minute" class="k-input" name="value" maxlength="3" /><label for="minute"> {{helper:lang line='emp_off:minute'}}</label>
        <div class="both time-xin">
            <h3>{{helper:lang line='emp_off:time'}}</h3>
            <div class="">
				<p style="margin-bottom:10px;">
					<label for="start" style="width:90px;display:block;float:left">Bắt đầu</label>
					<input id="start" name="time_start" class="from"/>
					<input style="width:50px;" id="timepicker_start" value="" class="type2 type3 hide timepicker timepicker_start" name="timepicker_start" />
				</p>
				<p style="margin-bottom:10px;">
					<label for="end" style="width:90px;display:block;float:left" class="hide type3 type2">Tới</label>
					<input id="end" name="time_end" class="to hide type3"/>
					<input style="width:50px;" id="timepicker_end" value="" class="hide type2 type3 timepicker timepicker_end" name="timepicker_end" />
				</p>
				<p style="margin-bottom:10px;display:none" class="type3">
					<label style="width:90px;display:block;float:left">Số ngày</label>
					<select name="total_day" class="type3">
						<?php for($j=1; $j<30; $j+=0.5){?>
						<option value="<?php echo $j?>"><?php echo $j?></option>
						<?php }?>
					</select>
				</p>
            </div>

        </div>
        <div class="both">
            <button class="k-button" id="send">{{helper:lang line='emp_off:send'}}</button>
        </div>
    </div>
<?php echo form_close()?>
<script type="text/javascript">
$('.timepicker_start').timepicker();
$('.timepicker_end').timepicker();
$(function() {
    $( "input.from" ).datepicker({
	dateFormat:"dd-mm-yy",
    defaultDate: "+1w",
    changeMonth: true,
    numberOfMonths: 1,
    onClose: function( selectedDate ) {
      $( "input.to" ).datepicker( "option", "minDate", selectedDate );
    }
    });
	
    $( "input.to" ).datepicker({
	dateFormat:"dd-mm-yy",
      defaultDate: "+1w",
      changeMonth: true,
      numberOfMonths: 1,
      onClose: function( selectedDate ) {
        $( "input.from" ).datepicker( "option", "maxDate", selectedDate );
      }
    });
  });
  
function minute_action( $value ){
	$('#minute').val(null);
	if(!$value){
		$('#minute,label[for="minute"]').hide();
	}
	else
		$('#minute,label[for="minute"]').show();
	
}
    function reset_time() {

    }


    $(document).ready(function () {
        var data = [
            { text: "{{helper:lang line='emp_off:off_type1'}}", value: "0" },
            { text: "{{helper:lang line='emp_off:off_type2'}}", value: "1" },
            { text: "{{helper:lang line='emp_off:off_type3'}}", value: "2" },
            { text: "{{helper:lang line='emp_off:off_type4'}}", value: "3" }
        ];

        // create DropDownList from input HTML element
        $("#type_off").kendoDropDownList({
            dataTextField: "text",
            dataValueField: "value",
            dataSource: data,
            index: 0,
            change: onChange
        });

        // create DropDownList from select HTML element
        $("#size").kendoDropDownList();

        var type_off = $("#type_off").data("kendoDropDownList");

        type_off.select(0);
        var size = $("#size").data("kendoDropDownList");

        function onChange() {
            var value = $("#type_off").val();
            $("#cap")
                .toggleClass("ve-som", value == 0)
                .toggleClass("di-tre", value == 1)
                .toggleClass("nghi-gio", value == 2)
                .toggleClass("nghi-ngay", value == 3);
			$('.hide').hide();
			
			if(value==2){
				$('.type3').hide();
				$('.type2').show();
			}
			else if(value==3){
				$('.type2').hide();
				$('.type3').show();
			}
			else if(value==0){
				$('.type2').hide();$('.type3').hide();
			}
			else if(value==1){
				$('.type2').hide();$('.type3').hide();
			}
			
			if (value == 0 || value == 1)
                minute_action(true);
			else
                minute_action(false);
            /*if (value == 2) {
                time_style1();
            }
            if (value == 3) {
                time_style2();
            }*/
        };
		$( "form#frm-xin" ).on( "submit", function( event ) {
			if($('#title').val()==""){
				alert("Chưa nhập tiêu đề");
				return false;
			}
			 if(validate_time()==false)
			 	return false;
		 	 event.preventDefault();
			 $url = $(this).attr('action');
			 
			
			 $.ajax({
				 url: $url,
				 type:'post',
				 dataType:'json',
				 data:$(this).serialize(),
				 success:function(data){
					alert('{{helper:lang line="emp_off:success"}}');
					$('form#frm-xin').closest('form#frm-xin').find("input").val("");
					location.reload();
				 }
			});
		  //console.log( $(this).serialize() );
		});
    });
</script>
<script>
    //time_style1();//kendou
    function time_style1() { // chon theo ngay, gio
        reset_time();
        $(document).ready(function () {
            function startChange() {
                var startDate = start.value();
                //alert(startDate);
                var endDate = end.value();

                if (startDate) {
                    startDate = new Date(startDate);
                    startDate.setDate(startDate.getDate());
                    end.min(startDate);
                } else if (endDate) {
                    start.max(new Date(endDate));
                } else {
                    endDate = new Date();
                    start.max(endDate);
                    end.min(endDate);
                }
            }

            function endChange() {
                var endDate = end.value(),
                startDate = start.value();

                if (endDate) {
                    endDate = new Date(endDate);
                    endDate.setDate(endDate.getDate());
                    start.max(endDate);
                } else if (startDate) {
                    end.min(new Date(startDate));
                } else {
                    endDate = new Date();
                    start.max(endDate);
                    end.min(endDate);
                }
            }

            var today = new Date(kendo.format('{0:dd-MM-yyyy}', new Date()))
            //alert(today);
            var start = $("#start").kendoDateTimePicker({
                value: new Date(),//today,
                change: startChange,
                parseFormats: ["dd/MM/yyyy"]
            }).data("kendoDateTimePicker");

            var end = $("#end").kendoDateTimePicker({
                value: today,
                change: endChange,
                parseFormats: ["dd/MM/yyyy"]
            }).data("kendoDateTimePicker");

            start.max(end.value());
            end.min(start.value());
        });
    }
function validate_time(){
	$result = true;
	$mi = $('#minute:hidden');//
	if($mi.length){ // 0,1 // kiem tra stat end
		$s = $('input[name="time_start"]').val();
		$e = $('input[name="time_end"]').val();
		if(($s=="" && $e=="") || ($s == "")){
			alert("{{helper:lang line='emp_off:required_time'}}");
			$result =  false;
		}
	}
	else{
		$value = $('#minute').val();
		if($value==""){
			alert("{{helper:lang line='emp_off:required_minute'}}");
			$result =  false;
		}
	}
	return $result;
}
</script>



